import store from '@/store';
import enquireJs from 'enquire.js';
import { onMounted } from 'vue';
export const DEVICE_TYPE = {
    DESKTOP: 'desktop',
    TABLET: 'tablet',
    MOBILE: 'mobile'
};
export const AppDeviceEnquire = () => {
    onMounted(() => {
        deviceEnquire((deviceType) => {
            switch (deviceType) {
                case DEVICE_TYPE.DESKTOP:
                    store.commit('app/SET_COLLAPSED', false);
                    store.commit('app/SET_DEVICETYPE', DEVICE_TYPE.DESKTOP);
                    break;
                case DEVICE_TYPE.TABLET:
                    store.commit('app/SET_COLLAPSED', true);
                    store.commit('app/SET_DEVICETYPE', DEVICE_TYPE.TABLET);
                    break;
                case DEVICE_TYPE.MOBILE:
                    store.commit('app/SET_COLLAPSED', true);
                    store.commit('app/SET_DEVICETYPE', DEVICE_TYPE.MOBILE);
                    break;
                default:
                    store.commit('app/SET_DEVICETYPE', DEVICE_TYPE.DESKTOP);
                    break;
            }
        });
    });
};

/**
 * 响应式检测
 * @param {*} callback
 */
export const deviceEnquire = function (callback) {
    const matchDesktop = {
        match: () => {
            callback && callback(DEVICE_TYPE.DESKTOP);
        }
    };

    const matchLablet = {
        match: () => {
            callback && callback(DEVICE_TYPE.TABLET);
        }
    };

    const matchMobile = {
        match: () => {
            callback && callback(DEVICE_TYPE.MOBILE);
        }
    };

    enquireJs
        .register('screen and (max-width: 720px)', matchMobile)
        .register('screen and (min-width: 720px) and (max-width: 1199px)', matchLablet)
        .register('screen and (min-width: 1200px)', matchDesktop);
};